<!--
 * @Descripttion: 
 * @version: 
 * @Author: gonghong
 * @Date: 2023-06-25 11:10:38
-->

<script setup>
import { reactive, ref } from 'vue'
import { login, getCodeImg } from '@/api/system'
import { onShow } from '@dcloudio/uni-app'
const __USER_CACHE__ = 'user_cache'

const loginParams = reactive({
  telephone: null,
  password: null,
  verificationCodeResult: null,
  uuid: null
})

const loginCode = reactive({
  codeUrl: null
})
// const remember = ref([]) 
const remember = reactive({ value: [1] }) //记住密码
const rememberOptions = reactive([{ text: '记住密码', value: 1 }])

const getCode = () => {
  getCodeImg().then((res) => {
    loginCode.codeUrl = 'data:image/gif;base64,' + res.img
    loginParams.uuid = res.uuid
  })
}

/**
 * @function 登陆相关参数校验和接口登陆
 * @return {*}
 */
const loginClick = async () => {
  console.log("agreeChoose", agreeChoose, "agreeChoose.value", agreeChoose.value);
  if(agreeChoose.value == 'true'){
    //判断手机号校验是否正确
    const regex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    if (loginParams.telephone == null || !regex.test(loginParams.telephone)) {
      uni.showModal({
        title: '提示',
        content: '手机号格式不正确'
      })
      return
    }
    if (!loginParams.password) {
      uni.showModal({
        title: '提示',
        content: '请输入密码'
      })
      return
    }
    uni.showLoading({ title: '登陆中', mask: true })
    try {
      const result = await login(loginParams)
      uni.hideLoading()
      if (result.code == 200) {
        uni.setStorageSync('accessToken', result.data)
        setRememberAsync()
        uni.switchTab({
          url: `/pages/index/index`
        })
      } else {
        getCode()
        uni.showModal({
          title: '提示',
          content: result?.msg || '登陆失败，请稍后再试'
        })
      }
    } catch (error) {
      if (error.code === 500) {
        getCode()
      }
    }
  } else {
    uni.showModal({
          title: '警告',
          content: '请同意并接受《用户服务协议》及《隐私政策》'
        })
  }
  
}

onShow(async () => {
  const userData = await getUserCache()
  if (userData) {
    loginParams.telephone = userData.telephone || ''
    loginParams.password = userData.password || ''
    remember.value = userData.isCheck
  }
  getCode()
})

/**
 * 记住密码
 */
const setUserCache = (isCheck) => {
  uni.setStorageSync(__USER_CACHE__, {
    telephone: loginParams.telephone,
    password: loginParams.password,
    isCheck
  })
}
const getUserCache = () => {
  return uni.getStorageSync(__USER_CACHE__, loginParams)
}
const setRememberAsync = () => {
  if (Object.keys(remember.value).length === 0) {
    uni.removeStorageSync(__USER_CACHE__)
    return
  }
  setUserCache(remember.value)
}
/**
 * 忘记密码
 */
const handleForgetPassword = () => {
  // uni.showModal({
  //   title: '忘记密码',
  //   content: '请联系客服找回密码'
  // })
  // console.log("进入方法");
  uni.redirectTo({
    url: `/pages/forgetCode/index`
  })
}
/**
 * 用户服务协议
 */
const goToUserAgreement = () => {
  uni.redirectTo({
    url: `/pages/userAgreement/index`
  })
}
/**
 * 隐私政策
 */
const goToPrivacyPolicy = () => {
  uni.redirectTo({
    url: `/pages/privacyPolicy/index`
  })
}
/**
 * 同意并接受
 */

const agreeChoose = ref()
//const agreeChoose = reactive({ value: "true" })
// const agreeOptions = reactive([{ value: "true" }])
// const agreeChoose = ref(false)
const agreeOptions = reactive([{ value: "true" }])

// const handleAgree = () => {
//   if(agreeChoose.value == 'true'){
//     agreeChoose.value = 'false'
//   } else {
//     agreeChoose.value = agreeOptions[0].value
//   }
//   // agreeChoose.value = !agreeChoose.value;
// }
</script>

<template>
  <view class="container">
    <view class="login-page">
      <view class="logoSwaper">
        <view class="logoBox">
          <image src="../../static/images/logo.png" class="logoImg" />
          <text>安全云维修助手</text>
        </view>
      </view>
      <view class="form-box">
        <uni-forms>
          <uni-forms-item>
            <uni-easyinput
              placeholder="请输入手机号"
              prefixIcon="person"
              :inputBorder="false"
              v-model="loginParams.telephone"
            />
          </uni-forms-item>
          <uni-forms-item>
            <uni-easyinput
              placeholder="请输入密码"
              prefixIcon="locked"
              :inputBorder="false"
              v-model="loginParams.password"
              type="password"
            />
          </uni-forms-item>
          <uni-forms-item class="code-cnt">
            <view style="display: flex; align-items: center">
              <uni-easyinput
                placeholder="请输入验证码"
                :inputBorder="false"
                prefixIcon="images"
                style="display: inline-block"
                class="code-content"
                v-model="loginParams.verificationCodeResult"
              />
              <image :src="loginCode.codeUrl" @click="getCode" class="login-code-img" />
            </view>
          </uni-forms-item>
          <uni-forms-item>
            <!-- <uni-data-checkbox
              v-model="remember.value"
              multiple
              :localdata="rememberOptions"
              @change="setRememberAsync"
            />
            <text 
              class="forget-password" 
              @click="handleForgetPassword"
              >忘记密码</text> -->
              <view  class="codeItem">
                <uni-data-checkbox
                  v-model="remember.value"
                  multiple
                  :localdata="rememberOptions"
                  @change="setRememberAsync"
                />
                <text class="forget-password" @click="handleForgetPassword">忘记密码</text>
              </view>
          </uni-forms-item>
          <button type="primary" @click="loginClick"> 登录</button>
        </uni-forms>
      </view>
    </view>
    <view class="privacy">
      <uni-data-checkbox
        v-model="agreeChoose"
        :localdata="agreeOptions"
      />
      <text> 同意并接受 </text>
      <text @click="goToUserAgreement" class="txt">《用户服务协议》</text>
      <text>及</text>
      <text @click="goToPrivacyPolicy" class="txt">《隐私政策》</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100vh;
}

.privacy {
  display: flex;
  justify-content: center;
  // align-items: center;
  margin-bottom: 20px;

  .txt {
    color: #2979ff;
  }
}

.login-page {
  // position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .logoSwaper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .logoBox {
      display: flex;
      flex-direction: column;
      color: #212121;
      line-height: 62upx;
      font-size: 30upx;
      align-items: center;
      padding-top: 80upx;
      margin-bottom: 110upx;
      .logoImg {
        width: 108upx;
        height: 108upx;
      }
    }
  }
}

.form-box {
  padding: 0 32upx;
}

.code-content {
  display: inline-block;
  width: 60%;
}
.login-code {
  display: inline-block;
  width: 39%;
}

::v-deep image {
  width: 100%;
  height: 40px;
}

.login-code-img {
  // margin-top: 8px;
  width: 150px;
  height: 33px;
}
::v-deep .uni-easyinput__content {
  border-bottom: 1px solid #d2d2d2;
}
.codeItem {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.uni-data-checkbox {
  flex: 1;
}
.forget-password {
  flex: 1;
  text-align: right;
    color: #2979ff !important;
}
</style>
